<template>
  <vp-dialog :span="4" ref="editDialogRef" class="drawer">
    <template #title >
      <vp-label :zh="`新增${formData.jb===10?'危险源-部门':'危险源-公司'}`" :en="`Add ${formData.jb===10?'Hazard Source - Department':'Hazard Source - Company'}`" v-if="type === 'add'"/>
      <vp-label :zh="`修改${formData.jb===10?'危险源-部门':'危险源-公司'}`" :en="`Edit ${formData.jb===10?'Hazard Source - Department':'Hazard Source - Company'}`" v-else/>
    </template >
    <el-form
      label-suffix=":"
      v-loading="loading"
      
      :model="formData"
      :rules="type == 'add' || type == 'edit'|| type == 'forceEdit'  ? formRules : ''"
      ref="formRef"
      label-width="140px"
    >
        <vp-card>
          <template #header>
            <vp-label zh="基础信息" en="Basic Information"/>
          </template>
          <el-row>
            <vp-col :span="4" >
                <el-form-item prop="bh">
                  <template #label><vp-label zh="危险源编号" en="Hazard No."/></template>
                  <el-input maxlength="100"
                  v-model.trim="formData.bh"
                  placeholder="不填写则自动生成"
                  :readonly="type != 'add'"
                  v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
                />
                <sapn v-else>{{ formData.bh }}</sapn>
                </el-form-item>
            </vp-col>
            <vp-col :span="4" >
                <el-form-item prop="zdbs">
                  <template #label><vp-label zh="重大危险源" en="Major Hazard"/></template>
                    <el-radio-group v-model="formData.zdbs" v-if="type === 'add' || type === 'edit' || type === 'forceEdit' ">
                        <el-radio :label="1">是 YES</el-radio>
                        <el-radio :label="0">否 NO</el-radio>
                    </el-radio-group>
                    <span v-else>{{ formData.zdbs == 1 ? '是 YES' : formData.zdbs == 0 ? '否 NO'  : '' }}</span>
                </el-form-item>
            </vp-col>
            <vp-col :span="4" >
                <el-form-item prop="lydj">
                  <template #label><vp-label zh="来源单据" en="Source Document"/></template>
                    <el-link v-if="formData.glwxyid" type="info" class="foc-link" :underline="false"  @click="handleViewGlyh">由部门转入:{{ formData.glwxybh}}</el-link>
                    <el-link v-else-if="formData.glzgfkdid" type="info" class="foc-link" :underline="false"  @click="handleViewZgfkd">整改反馈单:{{ formData.zgfkdbh}}</el-link>
                    <span v-else>手工录入</span>
                </el-form-item>
            </vp-col>
            </el-row>
            <el-row>
              <vp-col :span="4">
                <el-form-item prop="zrbmmc">
                  <template #label><vp-label zh="管理主责部门" en="Resp. Dept" /></template>
                  <el-input
                      v-model="formData.zrbmmc"
                      readonly
                      v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
                    >
                      <template #append>
                        <el-button @click="handleSearchDprt"><SvgIcon name="ele-Search"/></el-button>
                      </template>
                  </el-input>
                  <span v-else>{{ formData.zrbmmc }}</span>
                </el-form-item>
              </vp-col>
              <vp-col :span="4" >
                <el-form-item prop="ly">
                  <template #label><vp-label zh="危险源来源" en="Source"/></template>
                  <DictSelect 
                    :lxid='2008'
                    :selectedId="formData.ly"
                    @dictSelected='(data: any) => {formData.ly = data}'
                    v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
                    class="w100"
                  />
                  <sapn v-else>{{ formData.ly }}</sapn>
                </el-form-item>
            </vp-col>
            </el-row>
            <el-row >
              <vp-col :span="1" >
                  <el-form-item prop="mc">
                    <template #label><vp-label zh="危险源名称" en="Hazard Name"/></template>
                    <el-input maxlength="1300"
                    v-model.trim="formData.mc"
                    :autosize="{ minRows: 2}"
                      type="textarea"
                    v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
                  />
                  <sapn v-else>{{ formData.mc }}</sapn>
                  </el-form-item>
              </vp-col>
            </el-row>
            <el-row >
              <vp-col :span="1" >
                  <el-form-item prop="kndzdhg">
                    <template #label><vp-label zh="可能导致的后果" en="Pot. Consequences"/></template>
                    <el-input maxlength="1300"
                    v-model.trim="formData.kndzdhg"
                    :autosize="{ minRows: 2}"
                      type="textarea"
                    v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
                  />
                  <sapn v-else>{{ formData.kndzdhg }}</sapn>
                  </el-form-item>
              </vp-col>
            </el-row>
        </vp-card> 
        <vp-card>
            <template #header>
              <vp-label zh="风险分析和风险评价分级" en="Risk Analysis and Risk Assessment Classification"/>
            </template>
            <el-row >
              <vp-col :span="1" >
                  <el-form-item prop="xyfxkzcs">
                    <template #label><vp-label zh="现有风险控制措施" en="Exist. Risk Ctrl. Meas."/></template>
                    <el-input maxlength="1300"
                    v-model.trim="formData.xyfxkzcs"
                    :autosize="{ minRows: 3}"
                      type="textarea"
                    v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
                  />
                  <sapn v-else>{{ formData.xyfxkzcs }}</sapn>
                  </el-form-item>
              </vp-col>
            </el-row>
            <el-row>
              <vp-col :span="1" >
                <el-form-item>
                  <template #label><vp-label zh="风险分级" en="Risk Classification"/></template>
                  <el-space :size="0" >
                    <div>
                      <el-form-item prop="fxfjKnx" label-width="70">
                        <template #label><vp-label zh="可能性" en="Possibility"/></template>
                      <el-input maxlength="10"
                      v-model.trim="formData.fxfjKnx"
                      readonly
                    />
                    </el-form-item>
                    </div>
                    <div class="ml20"> 
                      <el-form-item >
                      <span> * </span>
                      </el-form-item>
                      </div>
                    <div>
                        <el-form-item prop="fxfjYzx">
                          <template #label><vp-label zh="严重性" en="Severity"/></template>
                          <el-input maxlength="10"
                            v-model.trim="formData.fxfjYzx"
                            readonly
                          />
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item prop="fxz">
                        <template #label><vp-label zh="风险值" en="Risk Value"/></template>
                      <sapn >{{ fxz }}</sapn>
                    </el-form-item>
                    </div>
                  </el-space>
                </el-form-item>
              </vp-col>
              <vp-col :span="2">
                <el-form-item :label-width="120">
                    <el-radio-group v-model="formData.fxfjKnx" :disabled="type != 'add' && type != 'edit' && type != 'forceEdit' ">
                        <el-radio label="1">
                        <vp-label zh="极不可能：几乎无法想象会发生" en="Almost impossible, with a 10000 hour rate less than 10-9"/>
                      </el-radio>
                      <el-radio label="2">
                        <vp-label zh="不太可能的：目前没有发生过" en="Very rare, with a 10000 hour rate of 10-9 to 10-7 or 1-1 times per 10 years"/>
                      </el-radio>
                      <el-radio label="3">
                        <vp-label zh="极少：很少，但会发生(很少发生)" en="Occasionally, the hourly rate ranges from 10-7 to 10-5 or 1-2 times per year"/>
                      </el-radio>
                      <el-radio label="4">
                        <vp-label zh="偶尔：可能会发生几次(有时发生)" en="Frequently, with a 10000 hour rate of 10-3-10-5 or 1-2 times per month"/>
                      </el-radio>
                      <el-radio label="5">
                        <vp-label zh="频繁：可能会发生许多次(经常发生)" en="Especially frequent, with a 10000 hour rate greater than 10-3 or once per week"/>
                      </el-radio>
                    </el-radio-group>
                </el-form-item>
              </vp-col>
              <vp-col :span="2">
                  <el-form-item :label-width="120">
                    <el-radio-group v-model="formData.fxfjYzx" :disabled="type != 'add' && type != 'edit' && type != 'forceEdit' ">
                        <el-space direction="vertical" alignment="left" :size="0">
                          <el-radio label="A">
                          <vp-label zh="可忽略的" en="Negligible"/>
                        </el-radio>
                        <el-radio label="B">
                          <vp-label zh="轻微的" en="Slight"/>
                        </el-radio>
                        <el-radio label="C">
                          <vp-label zh="严重的" en="Serious"/>
                        </el-radio>
                        <el-radio label="D">
                          <vp-label zh="特别严重的" en="Especially severe"/>
                        </el-radio>
                        <el-radio label="E">
                          <vp-label zh="灾难性的" en="Catastrophic"/>
                        </el-radio>
                        </el-space>
                    </el-radio-group>
                </el-form-item>
              </vp-col>
            </el-row>
            <el-row>
              <Vpol :span="4">
                <el-form-item prop="fxpjfj">
                  <template #label><vp-label zh="风险评价分级" en="Risk Assess. Classif."/></template>
                    <span :class="formatFxpjfj(formData.fxfjKnx, formData.fxfjYzx)" v-if="formData.fxfjKnx && formData.fxfjYzx">
                      <vp-label v-if="formatFxpjfj(formData.fxfjKnx, formData.fxfjYzx) === 'fxpjfj_1'" zh="可接受风险" en="Acceptable Risk"/>
                      <vp-label v-if="formatFxpjfj(formData.fxfjKnx, formData.fxfjYzx) === 'fxpjfj_2'" zh="缓解后可接受风险" en="Acceptable Risk After Mitigation"/>
                      <vp-label v-if="formatFxpjfj(formData.fxfjKnx, formData.fxfjYzx) === 'fxpjfj_3'" zh="不可接受风险" en="Unacceptable Risk"/>
                      <vp-label v-if="formatFxpjfj(formData.fxfjKnx, formData.fxfjYzx) === 'fxpjfj_unkown'" zh="" en=""/>
                    </span>
                </el-form-item>
              </Vpol>
          </el-row>
        </vp-card>
        <vp-card>
            <template #header>
              <vp-label zh="风险控制措施" en="Risk Control Measures"/>
            </template>
            <el-row >
              <vp-col :span="1" >
                  <el-form-item prop="fxkzcs">
                    <template #label><vp-label zh="风险控制措施" en="Risk Ctrl. Meas."/></template>
                    <el-input maxlength="1300"
                    v-model.trim="formData.fxkzcs"
                    :autosize="{ minRows: 3}"
                      type="textarea"
                    v-if="type === 'add' || type === 'edit' || type === 'forceEdit'"
                  />
                  <sapn v-else>{{ formData.fxkzcs }}</sapn>
                  </el-form-item>
              </vp-col>
            </el-row>
        </vp-card>
        <vp-card>
            <template #header>
              <vp-label zh="剩余风险" en="Residual Risk"/>
            </template>
            <el-row>
              <vp-col :span="1" >
                <el-form-item>
                  <template #label><vp-label zh="风险分级" en="Risk Classification"/></template>
                  <el-space :size="0" >
                    <div>
                      <el-form-item prop="syfxfjKnx" label-width="70">
                        <template #label><vp-label zh="可能性" en="Possibility"/></template>
                      <el-input maxlength="10"
                      v-model.trim="formData.syfxfjKnx"
                      readonly
                    />
                    </el-form-item>
                    </div>
                    <div class="ml20"> 
                      <el-form-item >
                      <span> * </span>
                      </el-form-item>
                      </div>
                    <div>
                        <el-form-item prop="syfxfjYzx">
                          <template #label><vp-label zh="严重性" en="Severity"/></template>
                          <el-input maxlength="10"
                            v-model.trim="formData.syfxfjYzx"
                            readonly
                          />
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item prop="syfxz">
                        <template #label><vp-label zh="风险值" en="Risk Value"/></template>
                      <sapn >{{ syfxz }}</sapn>
                    </el-form-item>
                    </div>
                  </el-space>
                </el-form-item>
              </vp-col>
              <vp-col :span="2">
                <el-form-item :label-width="120">
                    <el-radio-group v-model="formData.syfxfjKnx" :disabled="type != 'add' && type != 'edit' && type != 'forceEdit' ">
                        <el-radio label="1">
                        <vp-label zh="极不可能：几乎无法想象会发生" en="Almost impossible, with a 10000 hour rate less than 10-9"/>
                      </el-radio>
                      <el-radio label="2">
                        <vp-label zh="不太可能的：目前没有发生过" en="Very rare, with a 10000 hour rate of 10-9 to 10-7 or 1-1 times per 10 years"/>
                      </el-radio>
                      <el-radio label="3">
                        <vp-label zh="极少：很少，但会发生(很少发生)" en="Occasionally, the hourly rate ranges from 10-7 to 10-5 or 1-2 times per year"/>
                      </el-radio>
                      <el-radio label="4">
                        <vp-label zh="偶尔：可能会发生几次(有时发生)" en="Frequently, with a 10000 hour rate of 10-3-10-5 or 1-2 times per month"/>
                      </el-radio>
                      <el-radio label="5">
                        <vp-label zh="频繁：可能会发生许多次(经常发生)" en="Especially frequent, with a 10000 hour rate greater than 10-3 or once per week"/>
                      </el-radio>
                    </el-radio-group>
                </el-form-item>
              </vp-col>
              <vp-col :span="2">
                  <el-form-item :label-width="120">
                    <el-radio-group v-model="formData.syfxfjYzx" :disabled="type != 'add' && type != 'edit' && type != 'forceEdit' ">
                        <el-space direction="vertical" alignment="left" :size="0">
                          <el-radio label="A">
                            <vp-label zh="可忽略的" en="Negligible"/>
                          </el-radio>
                          <el-radio label="B">
                            <vp-label zh="轻微的" en="Slight"/>
                          </el-radio>
                          <el-radio label="C">
                            <vp-label zh="严重的" en="Serious"/>
                          </el-radio>
                          <el-radio label="D">
                            <vp-label zh="特别严重的" en="Especially severe"/>
                          </el-radio>
                          <el-radio label="E">
                            <vp-label zh="灾难性的" en="Catastrophic"/>
                          </el-radio>
                        </el-space>
                    </el-radio-group>
                </el-form-item>
              </vp-col>
            </el-row>
            <el-row>
              <Vpol :span="2">
                <el-form-item prop="syfxpjfj">
                  <template #label><vp-label zh="风险评价分级" en="Risk Assess. Classif."/></template>
                  <span :class="formatFxpjfj(formData.syfxfjKnx, formData.syfxfjYzx)" v-if="formData.syfxfjKnx && formData.syfxfjYzx">
                      <vp-label v-if="formatFxpjfj(formData.syfxfjKnx, formData.syfxfjYzx) === 'fxpjfj_1'" zh="可接受风险" en="Acceptable Risk"/>
                      <vp-label v-if="formatFxpjfj(formData.syfxfjKnx, formData.syfxfjYzx) === 'fxpjfj_2'" zh="缓解后可接受风险" en="Acceptable Risk After Mitigation"/>
                      <vp-label v-if="formatFxpjfj(formData.syfxfjKnx, formData.syfxfjYzx) === 'fxpjfj_3'" zh="不可接受风险" en="Unacceptable Risk"/>
                      <vp-label v-if="formatFxpjfj(formData.syfxfjKnx, formData.syfxfjYzx) === 'fxpjfj_unkown'" zh="" en=""/>
                    </span>
                </el-form-item>
              </Vpol>
          </el-row>
            <el-row  v-if="type === 'add' || type === 'edit'">
              <vp-col :span="4" >
                <el-form-item prop="shr" >
                  <template #label><vp-label zh="审核人" en="Reviewer"/></template>
                      <el-input
                        v-model="formData.shr"
                        @blur="formData.shr = $event.target.value.trim()"
                        maxlength="1300"
                        readonly
                      >
                      <template #append>
                        <el-button @click="handleSearchFkr"><SvgIcon name="ele-Search"/></el-button>
                      </template>
                      </el-input>
                </el-form-item>
              </vp-col>
            </el-row>
        </vp-card>
        <FileListCard
            class="mt4 w100"
            :readOnly="type == 'audit' || type == 'view'"
            :attachmentList.sync="formData.attachments"
            @attachmentListEmit="getAttachmentListEmit($event)"
          >
          </FileListCard> 
    </el-form>
    <template #footer>
       <vp-btn-save :loading="saveLoading" @click="handleSave(10)"/>
       <vp-btn-submit :loading="saveLoading" @click="handleSave(88)"/>
    </template>
  </vp-dialog>
  <UserDialog ref="userDialogRef"></UserDialog>
  <DepartmentDialog ref="departmentRef"></DepartmentDialog>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs, computed } from "vue";
import { useI18n } from "vue-i18n";
import { i18n } from "/@/i18n";
import request from "/@/utils/request";
import validateUtils from "/@/utils/validateUtils";
import DepartmentDialog from '/@/components/vp/department/VpDepartmentDialog.vue';
import DictSelect from '/@/components/vp/dict/VpDictSelect.vue';
import FileListCard from '/@/components/vp/file/VpFileListCard.vue';
import UserDialog from '/@/components/vp/user/VpUserDialog.vue';
import router from "/@/router";

/**
 *  这个弹窗只用来 衍生新的危险源新增时候调用
 */
export default defineComponent({
  name: "addDeptDangerousSrc",
  components: {
    DepartmentDialog,
    DictSelect,
    FileListCard,
    UserDialog,
  },
  emits: ["formSubmited"],
  setup(props, context) {
    const state = reactive({
      type: "add",
      loading: false,
      saveLoading: false,
      termInputType: 1,
      formData: {
        id: "",
        jb: null,
        bh: "",
        zdbs: null,
        glzgfkdid: "",
        zgfkdbh: "",
        glwxyid: "",
        glwxybh: "",
        zrbmid: "",
        zrbmmc: "",
        yyfx: "",
        ly: "",
        mc: "",
        kndzdhg: "",
        xyfxkzcs:"",
        fxfjKnx: "",
        fxfjYzx: "",
        fxkzcs: "",
        syfxfjKnx: "",
        syfxfjYzx: "",
        ysxdbxybs: 0,
        xdwxyid: "",
        xdwxybh: "",
        shrid: "",
        shr: "",
        attachments: [],
      },
      formRules: {
        zdbs: [validateUtils.notNull],
        mc: [validateUtils.notNull],
        ly: [validateUtils.notNull],
        kndzdhg: [validateUtils.notNull],
        xyfxkzcs: [validateUtils.notNull],
        fxfjKnx: [validateUtils.notNull],
        fxfjYzx: [validateUtils.notNull],
        fxkzcs: [validateUtils.notNull],
        zrbmmc: [validateUtils.notNull],
        syfxfjKnx: [validateUtils.notNull],
        syfxfjYzx: [validateUtils.notNull],
        ysxdbxybs: [validateUtils.notNull],
        shr: [validateUtils.notNull],
        xdwxybh: [{
              message: '必填/Required.',
              validator: (rule: any, value: any, callback: any)=>{
                  if (state.formData.ysxdbxybs == 1 && !state.formData.xdwxybh) {
                      callback(new Error());
                  } else {
                      callback();
                  }
              },
          }],
      },
    });

    const editDialogRef = ref();
    const formRef = ref();
    const addRef = ref();
    const { t } = useI18n();

    const handleOpen = (type: string, jb: number) => {
      initFormData();
      state.type = type;
      state.formData.jb = jb;
      editDialogRef.value.handleOpen();
    };

    const initFormData = () => {
      state.formData = {
        id: "",
        jb: null,
        bh: "",
        zdbs: null,
        glzgfkdid: "",
        zgfkdbh: "",
        glwxyid: "",
        glwxybh: "",
        zrbmid: "",
        zrbmmc: "",
        yyfx: "",
        ly: "",
        mc: "",
        kndzdhg: "",
        xyfxkzcs:"",
        fxfjKnx: "",
        fxfjYzx: "",
        fxkzcs: "",
        syfxfjKnx: "",
        syfxfjYzx: "",
        ysxdbxybs: 0,
        xdwxyid: "",
        xdwxybh: "",
        shrid: "",
        shr: "",
        attachments: [],
      };
    };

    const handleSave = (zt: number) => {
      if (state.loading) {
        return;
      }
      editDialogRef.value.handleOpen();
       state.saveLoading = true;
       if(zt == 88){
        formRef.value.validate((valid: boolean) => {
          if(valid){
            request.post("/safe/deptDangerousSrc/add", {
              ...state.formData,
                zt: zt
            }).then((res) => {
                context.emit("formSubmited", res.data);
                editDialogRef.value.handleClose();
            }).finally(()=>{
                state.saveLoading = false;
            }).catch(()=>{state.saveLoading = false;});
          }else{
            state.saveLoading = false;
          }
       }).catch(()=>{state.saveLoading = false;});
       }else{
          request.post("/safe/deptDangerousSrc/add", {
              ...state.formData,
              zt: zt
          }).then((res) => {
              context.emit("formSubmited", res.data);
              editDialogRef.value.handleClose();
          }).finally(()=>{
              state.saveLoading = false;
          }).catch(()=>{state.saveLoading = false;});
       }
    };

    onMounted(() => {});

    const fxz = computed(() => {
        if(state.formData.fxfjKnx && state.formData.fxfjYzx){
          return state.formData.fxfjKnx+state.formData.fxfjYzx
        }else{
          return '';
        }
    })

    const syfxz = computed(() => {
        if(state.formData.syfxfjKnx && state.formData.syfxfjYzx){
          return state.formData.syfxfjKnx+state.formData.syfxfjYzx
        }else{
          return '';
        }
    })

    const userDialogRef = ref();

    const handleSearchFkr = () =>{
      userDialogRef.value.handleOpen({
        type: 1,
        multi: false,
        selected: state.formData.shrid,
        callback: (data: any) => {
          state.formData.shrid = data.yhid;
          state.formData.shr = data.xm;
        }
      });
    }
    const departmentRef = ref();
    const handleSearchDprt =() =>{
        departmentRef.value.handleOpen({
          selectedId: state.formData.zrbmid,
          callback: (data: any) => {
            state.formData.zrbmid = data.id;
            state.formData.zrbmmc = data.dprtname;
          }
        });
      }

    const handleViewZgfkd = () =>{
        router.push({
          name: 'viewRectification',
          params: {
            id: state.formData.glzgfkdid,
          },
        });
    }  

    const getAttachmentListEmit = (list: any) => {
        state.formData.attachments = list;
    };

    const knxArray = ['1','2','3','4','5']; //可能性
    const yzxArray = ['A','B','C','D','E']
    /**
     * 格式化风险评价分级
     */
    const formatFxpjfj = (knx:string, yzx: string)=>{
      let iKnx = knxArray.indexOf(knx);
      let iYzx = yzxArray.indexOf(yzx);
      if(iKnx <0 || iYzx <0){
        return 'fxpjfj_unkown';
      }

      //当可能性与严重性 序号相加大于等于8 时，风险评价分级为不可接受风险
      if(iKnx + iYzx + 2 >= 8){
        return 'fxpjfj_3';
      }

      //当可能性与严重性 序号相加小于等于4，并且不都等于2时 风险评价分级为不可接受风险
      if(iKnx + iYzx + 2 < 4 || (iKnx + iYzx + 2 == 4 && iKnx != iYzx)){
        return 'fxpjfj_1';
      }
      //其他情况为缓解后可接受风险
      return 'fxpjfj_2';
    }  

    return {
      ...toRefs(state),
      editDialogRef,
      formRef,
      addRef,
      handleOpen,
      handleSave,
      fxz,
      handleSearchDprt,
      handleViewZgfkd,
      handleSearchFkr,
      userDialogRef,
      departmentRef,
      syfxz,
      getAttachmentListEmit,
      formatFxpjfj,
    };
  },
});
</script>


<style lang="scss" scoped>
.drawer {
  :deep(.el-checkbox__label) {
    min-width: 80px;
  }
}
:deep(.el-space__item) {
    padding-bottom: 0px !important;
     margin-right: 0px !important;
}
:deep(.el-divider--horizontal){
    display: block;
    height: 1px;
    width: 100%;
    margin: 0;
    border-top: 1px var(--el-border-color) var(--el-border-style);
}
:deep(.ycds-class .el-form-item__label) {
  width: 200px !important;
}

.fxpjfj_1 {
  font-weight: bold;
  font-size: large;
  color: green;
}
.fxpjfj_2 {
  font-weight: bold;
  font-size: large;
  color: orange;
}
.fxpjfj_3 {
  font-weight: bold;
  font-size: large;
  color: red;
}
</style>
